<template>
  <view id="container">
    <image src="https://z3.ax1x.com/2021/09/02/hD6GsU.png" class="banner"></image>
    <u-form ref="uForm" :model="formData">
      <!-- 寻人类型 -->
      <view class="information reason" v-if="cause">
        <view class="note">
          <image src="../../static/index/bhsq.png" mode=""></image>
          <text class="red_txt">请按驳回原因修改提交</text>
        </view>
        <view class="note">
          <image src="" mode=""></image>
          <view class="detail">
            <view class="txt1">驳回原因：</view>
            <view class="txt2">{{cause}}</view>
          </view>
        </view>
      </view>

      <view class="information">
        <view class="title">
          <view class="vertical-bar"></view>
          <view class="txt">寻人类型</view>
        </view>

        <view class="content">
          <view style="display: flex; padding-bottom: 18rpx">
            <view class="kinsfolk" @click="conFirmFindtType(1)" :class="findType.strangerLost ? 'typeConfirm' : ''">
              <image src="../../static/people-search/jr_1.png" class="icon"></image>
              <view>找亲人</view>
            </view>
            <view class="relation" @click="conFirmFindtType(2)" :class="findType.familyLost ? 'typeConfirm' : ''">
              <image src="../../static/people-search/qs_2.png" class="icon"></image>
              <view>帮忙找</view>
            </view>
          </view>
          <view class="search-title">
            <view class="search-title-txt">标题</view>
            <u-input type="text" v-model="formData.title" :border="true" placeholder="写一句话，发动大家一起寻找走失人员" />
          </view>
        </view>
      </view>

      <!-- 寻人基础信息 -->
      <view class="information">
        <view class="title">
          <view class="vertical-bar"></view>
          <view class="txt">寻人基础信息</view>
        </view>

        <view class="content">
          <!-- 手动添加 -->
          <view class="add" v-if="formData.lost_type == 1">
            <view class="face-box">
              <view v-for="(item, index) in faceList" :key="index" class="face-item" @click="handleClickFace(index)">
                <image src="../../static/make-img/xz_1.png" class="choose-item" v-show="item.choose"></image>
                <view>{{ item.name }}</view>
                <view class="item-label">{{ item.label }}</view>
              </view>
            </view>
           <!-- <view class="add-item" @click="clearForm">
              <image src="../../static/people-search/sdtj.png" class="add-btn"></image>
              <view class="add-item-txt">手动添加</view>
            </view> -->
          </view>
          <!-- 手动添加 -->
          <!-- <view v-if="formData.lost_type == 1">请在下方手动添加人员信息</view> -->
          <u-form :model="formData" ref="uForm" class="form-content">
            <!-- 姓名 -->
            <u-form-item :required="true" label="姓名" class="form-content-item">
              <view class="content-input">
                <u-input v-model="formData.name" placeholder="请输入姓名" />
              </view>
            </u-form-item>

            <!-- 性别 -->
            <u-form-item label="性别" :required="true" prop="sex" class="form-content-item">
              <view class="choose">
                <radio-group>
                  <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value" @click="radioChange(index)">
                    <view>
                      <radio :checked="item.checked" />
                    </view>
                    <view>{{ item.name }}</view>
                  </label>
                </radio-group>
              </view>
            </u-form-item>

            <!-- 年龄 -->
            <u-form-item :required="true" label="年龄" class="form-content-item">
              <view class="content-input">
                <u-input v-model="formData.age" placeholder="请填写大致年龄" type="number" />
                <view style="padding-right: 10rpx">岁</view>
              </view>
            </u-form-item>

            <!-- 身高 -->
            <u-form-item :required="true" label="身高" class="form-content-item">
              <view class="content-input">
                <u-input v-model="formData.height" placeholder="请填写大致身高" type="number" />
                <view style="padding-right: 10rpx">cm</view>
              </view>
            </u-form-item>
          </u-form>
          <!-- <view class="btn">确定</view> -->
        </view>
      </view>

      <!-- 外貌特征 -->
      <view class="information" style="padding-bottom: 42rpx">
        <view class="title" style="margin-bottom: 41rpx">
          <view class="vertical-bar"></view>
          <view class="txt">外貌特征</view>
        </view>

        <view class="content" style="width: 591rpx; height: 150rpx; margin: 0 auto; padding: 17rpx 16rpx; border: 1rpx solid #cdcdcd; border-radius: 10rpx">
          <textarea v-model="formData.lost_trait" class="text" placeholder-style="color: #D0D0D0; font-size: 30rpx;" placeholder="例如：走失当天的穿着，随身物品等" />
        </view>
      </view>

      <!-- 走失时间、地点 -->
      <view class="information">
        <view class="title">
          <view class="vertical-bar"></view>
          <view class="txt">走失时间、地点</view>
        </view>

        <view class="content" style="padding: 27rpx 0 36rpx 0rpx; display: flex; flex-direction: column; align-items: center">
          <view class="time" @click="time_show = true" style="margin-bottom: 13rpx">
            <image src="../../static/people-search/xrsj.png" class="icon"></image>
            <view>{{ formData.lost_time || '请选择走失时间' }}</view>
            <u-picker mode="time" v-model="time_show" :params="params" @confirm="onTime"></u-picker>
          </view>
          <view class="position" @click="chooseLocation">
            <image src="../../static/people-search/xrdd.png" class="icon"></image>
            <view>{{ choose_name || '请选择走失地点' }}</view>
          </view>
        </view>
      </view>

      <!-- 走失描述 -->
      <view class="information" style="padding-bottom: 42rpx">
        <view class="title" style="margin-bottom: 41rpx">
          <view class="vertical-bar"></view>
          <view class="txt">走失描述</view>
        </view>

        <view class="content" style="width: 591rpx; height: 150rpx; margin: 0 auto; padding: 17rpx 16rpx; border: 1rpx solid #cdcdcd; border-radius: 10rpx">
          <textarea v-model="formData.describe" class="text" placeholder-style="color: #D0D0D0; font-size: 30rpx;" placeholder="例如：什么样的情况下走失" />
        </view>
      </view>

      <!-- 上传走失人员照片 -->
      <view class="information">
        <view class="title">
          <view class="vertical-bar"></view>
          <view class="txt">
            上传走失人员照片
            <text class="max">（最多6张）</text>
          </view>
        </view>

        <view style="width: 100%; padding-left: 33rpx">
          <view v-if="local_img.length != 0" style="display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; padding: 40rpx 0rpx">
            <view style="position: relative" v-for="(item2, index) in local_img">
              <image :src="item2" mode="aspectFill" style="width: 26vw; height: 26vw; border-radius: 10rpx; margin-right: 10rpx" v-if="index != local_img.length - 1"></image>
              <image
                src="../../static/facebook/sc_2.png"
                style="top: 5rpx; right: 5rpx; position: absolute; width: 28rpx; height: 28rpx"
                v-if="index != local_img.length - 1"
                @click="user_delete_pic(index)"
              ></image>
              <image
                src="../../static/facebook/xztp.png"
                style="width: 25vw; height: 25vw; border-radius: 10rpx"
                @click="chooseImg"
                v-if="index == local_img.length - 1"
                v-show="local_img.length < 7"
              ></image>
            </view>
          </view>
        </view>
      </view>

      <!-- 通讯录 -->
      <view class="information">
        <view class="title">
          <view class="vertical-bar"></view>
          <view class="txt">
						亲属电话
            <text class="max">（最多可添加3个）</text>
          </view>
        </view>

        <view style="display: flex; flex-direction: column; align-items: flex-start; margin-top: 20rpx">
          <u-checkbox-group :wrap="true" style="margin-left: 70rpx">
            <u-checkbox v-model="item.checked" v-for="(item, index) in phone_list" style="margin: 10rpx 0">
              {{ item.mobile }}
            </u-checkbox>
          </u-checkbox-group>

          <view style="color: #cccccc; margin-left: 70rpx; display: flex; flex-direction: row; align-items: center" @click="goto_addmore_phonenumber">
            <u-icon class="plus" name="plus" size="48" color="#CCCCCC" style="margin-bottom: 50rpx; margin-top: 50rpx; margin-right: 10rpx"></u-icon> 添加更多号码
          </view>
        </view>
      </view>
      <view class="information protocol">
        <u-checkbox-group>
          <u-checkbox v-model="item.checked" v-for="(item, index) in agree_list" style="margin: 10rpx 0">
            <text>{{ item.txt1 }}</text>
            <text style="color: #ff804c" @click.stop="see_submit_protocal">{{ item.txt2 }}</text>
          </u-checkbox>
        </u-checkbox-group>
      </view>
      <view class="issue-btn" @click="submit">发布</view>
    </u-form>

    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { getImageData, getFloatLocationByExif } from '../../js_sdk/iz-exif/js_sdk/izExif/izExif.js'
var img_tool = require('image-tools')

export default {
  data() {
    return {
      choose_longi: '',
      choose_lati: '',
      choose_name: '',
      local_img: ['../../static/facebook/xztp.png'],
      net_img: [],
      temp_img_path: [],
      phone_list: [],
      current: '',
      time_show: false,
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: false,
        timestamp: true
      },
      timestamp: '',
      formData: {
        id: 0,
        lost_type: '',
        title: '',
        name: '',
        sex: '',
        age: '',
        height: '',
        face_id: 0,
        lost_trait: '',
        lost_time: '',
        lost_lon: '',
        lost_lat: '',
        describe: '',
        face_img: [],
        phone: []
      },
      items: [
        {
          value: 'man',
          name: '男',
          checked: false
        },
        {
          value: 'women',
          name: '女',
          checked: false
        }
      ],

      findType: {
        familyLost: false,
        strangerLost: false
      },
      type_flag: '', //用于判断用户是否选择了类型
      agree_list: [
        {
          checked: false,
          txt1: '我已阅读并同意',
          txt2: '《人人寻发布寻人协议》'
        }
      ],
      faceList: [],
			editPhone: [],
			// 驳回原因
			cause: ''
    }
  },
  onLoad(op) {
    if (op.id) {
      this.formData.id = op.id
      this.info_rejected_user_modify(op.id)
			uni.setNavigationBarTitle({
					title: '编辑寻人'
			});
    } else {
			uni.setNavigationBarTitle({
					title: '我要寻人'
			});
		}
    this.getFaceList();
		// this.user_get_phone_list();
  },
	onShow() {
		this.user_get_phone_list();
	},
  methods: {
    // 获取脸谱列表
    getFaceList() {
      let self = this
      this.$u.api.drag_facebook_list().then((res) => {
        if (res.data.length) {
          res.data.forEach((item) => {
            item.choose = false
          })
          self.faceList = res.data
        }
      })
    },
    // 点击对应的脸谱
    handleClickFace(i) {
      let self = this
			self.net_img = [];
			self.local_img = [];
      self.faceList.filter((item, index) => {
        if (index === i) {
					if(item.choose === true) {
						item.choose = false;
						self.clearForm();
					} else {
						self.local_img = ['../../static/facebook/xztp.png']
						item.choose = true
						self.formData.name = item.name
						self.formData.sex = item.sex
						self.radioChange(item.sex === 1 ? 0 : 1)
						self.formData.age = item.age
						self.formData.height = item.height
						for (let f = 0; f < item.face_img.length; f++) {
						  self.net_img.push(item.face_img[f])
							if(item.face_img[f].indexOf('https') !== -1) {
								self.local_img.unshift(item.face_img[f])
							} else {
								self.local_img.unshift(self.vuex_api_HEADER + item.face_img[f])
							}
						}
						// self.formData.phone.push(val.id);
						self.phone_list.forEach((phoVal) => {
						  phoVal.checked = false
						  item.phone.forEach((val) => {
						    if (phoVal.id === val.id) {
						      phoVal.checked = true
						    }
						  })
						})
					}
        } else {
          item.choose = false
        }
      })
    },
    //  点击手动添加，清空表单
    clearForm() {
      this.local_img = ['../../static/facebook/xztp.png']
      this.formData.name = ''
      this.formData.sex = ''
      this.formData.age = ''
      this.formData.height = ''
      this.net_img = []
      this.phone_list.forEach((phoVal) => {
        phoVal.checked = false
      })
      this.items.forEach((item) => {
        item.checked = false
      })
      this.faceList.forEach((faceItem) => {
        faceItem.choose = false
      })
    },
    // 用户编辑需要修改的寻人信息
    info_rejected_user_modify(id) {
      let self = this
      this.$u.api.info_rejected_user_modify({
        id: id
      }).then((res) => {
					console.log('res', res)
        if (res.code == 200) {
					// 驳回信息
					self.cause = res.data.cause;
          res.data.lost_type == 0 ? (self.findType.familyLost = true) : (self.findType.strangerLost = true)
					self.formData.title = res.data.title
					self.formData.age = res.data.age
					self.formData.height = res.data.height

          self.formData.lost_trait = res.data.lost_trait

					// 发布的时间更新
					self.timestamp = Math.round(new Date() / 1000);
					self.formData.lost_time = res.data.lost_time;
					console.log('self.formData.lost_time', self.formData.lost_time)
					// 发布的地址
					self.choose_longi = res.data.lost_lon
					self.choose_lati = res.data.lost_lat

					// 姓名
					self.choose_name = res.data.address_detail
					self.formData.describe = res.data.describe
					self.formData.face_img = res.data.face_img
					self.formData.name = res.data.name
					// 性别
					self.formData.sex = res.data.sex;
					self.radioChange(res.data.sex === 1 ? 0 : 1)
					
					// res.data.sex == 1 ? (self.items[1].checked = true) : (self.items[2].checked = true)
					// self.formData.sex = res.data.sex
					// 类型
					if (res.data.type == 0) {
						// 找家人
						self.formData.lost_type = 0
						self.type_flag = 2
						self.findType.familyLost = true
						self.findType.strangerLost = false
					} else {
						self.formData.lost_type = 1
						self.type_flag = 1
						self.findType.familyLost = false
						self.findType.strangerLost = true
					}
            // 将照片拉到本地
          self.net_img = res.data.face_img
          for (var i = 0; i < res.data.face_img.length; i++) {
						if(res.data.face_img[i].indexOf('https') !== -1) {
							self.local_img.unshift(res.data.face_img[i])
						} else {
							self.local_img.unshift(self.vuex_api_HEADER + res.data.face_img[i])
						}
          }
					if(self.formData.id) {
						self.phone_list.forEach((phoVal) => {
						  res.data.phone.forEach((val) => {
						    if (phoVal.id == val) {
						      phoVal.checked = true
						    }
						  })
						})
					}
					this.editPhone = res.data.phone;
        }
      })
    },
    // 删除图片
    user_delete_pic(index) {
      this.net_img.splice(index, 1)
      this.local_img.splice(index, 1)
    },
    // 添加其他手机号码
    goto_addmore_phonenumber() {
      uni.navigateTo({
        url: '../self/sub/phone_list'
      })
    },
    // 提交
    submit() {
      if (false == this.must_check()) {
        return
      }
      let that = this
      // 将电话拼接成字符串
      let phone = ''
      for (var i = 0; i < this.phone_list.length; i++) {
        if (this.phone_list[i].checked == true) {
          phone = phone + ',' + this.phone_list[i].id
        }
      }
      phone = phone.slice(1)

      // 将照片地址拼接为字符串

      let face_img = ''
      for (var i = 0; i < this.net_img.length; i++) {
        face_img = face_img + ',' + this.net_img[i]
      }
      face_img = face_img.slice(1);
			(async () => {
        let __params = {
          id: this.formData.id,
          lost_type: this.formData.lost_type,
          title: this.formData.title,
          name: this.formData.name,
          sex: this.formData.sex,
          age: this.formData.age,
          height: this.formData.height,
          face_id: this.formData.face_id,
          lost_trait: this.formData.lost_trait,
          lost_time: this.timestamp,
          lost_lon: this.choose_longi,
          lost_lat: this.choose_lati,
          address_detail: this.choose_name,
          describe: this.formData.describe,
          face_img: face_img,
          phone: phone
        }
        this.$u.api.user_submit_or_modify_looKfor_info(__params).then((res) => {
          if (res.code == 200) {
            this.$refs.uToast.show({
              title: `提交成功${res.msg}`,
              type: 'success'
            })
            setTimeout(() => {
              uni.navigateTo({
                url: './make_list'
              })
            }, 1000)
          } else {
            this.$refs.uToast.show({
              title: `提交失败${res.msg}`,
              type: 'success'
            })
          }
        })
      })()
    },
    // 信息完整性检查
    must_check() {
      let hints = [
        '请选择寻人类型',
        '请填写标题',
        '请补充姓名',
        '请选择性别',
        '请填写年龄',
        '请填写身高',
        '请补充外貌特征',
        '请选择走失时间',
        '请选择走失地点',
        '请补充走失描述',
        '请上传走失人照片',
        '请选择你的联系方式',
        '同意用户协议后才能发布哦'
      ]
      let phone_sel = false
      for (var i = 0; i < this.phone_list.length; i++) {
        if (this.phone_list[i].checked == true) {
          phone_sel = true
          break
        }
      }
      let check_data = [
        this.type_flag,
        this.formData.title,
        this.formData.name,
        this.formData.sex,
        this.formData.age,
        this.formData.height,
        this.formData.lost_trait,
        this.timestamp,
        this.choose_longi,
        this.formData.describe,
        this.net_img.length == 0 ? '' : 'something',
        phone_sel == false ? '' : 'something',
        this.agree_list[0].checked == false ? '' : 'something'
      ]
      for (var i = 0; i < check_data.length; i++) {
        if (check_data[i] == '') {
          uni.showToast({
            title: hints[i],
            icon: 'none'
          })
          return false
        }
      }
      return true
    },
    // 获取手机号列表
    async user_get_phone_list() {
      let that = this
      let res = await that.$u.api.user_get_phone_list()
      if (res.code == 200) {
        // 数组置空
        that.phone_list = []
        for (var i = 0; i < res.data.length; i++) {
          that.phone_list.push({
            id: res.data[i].id,
            mobile: res.data[i].mobile,
            checked: false
          })
        }
      }
			// 编辑页进入处理
			// 电话号码
			that.phone_list.forEach((phoVal) => {
			  that.editPhone.forEach((val) => {
			    if (phoVal.id == val) {
			      phoVal.checked = true
			    }
			  })
			})
    },
    // 查看发布寻人协议
    see_submit_protocal() {
      uni.navigateTo({
        url: '../self/sub/submit_protocal',
        fail: (res) => {}
      })
    },
    // 选择手机号
    select_phone(index) {
      // 删除图片
      this.selectPhone[index].selected = !this.selectPhone[index].selected
    },
    delete_img(index) {
      this.imglist.slice(index, 1) //将此图片删除
    },
    // 选择图片
    chooseImg() {
      let that = this
      let countNum = 7 - that.local_img.length
      uni.chooseImage({
        count: countNum, //默认6
        sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['camera', 'album'], //从相册选择
        success: function (res) {
          for (let i = 0; i < res.tempFilePaths.length; i++) {
            const imgSize = res.tempFiles[i] && res.tempFiles[i].size ? res.tempFiles[i].size : 0
            const imgName = res.tempFiles[i] && res.tempFiles[i].name ? res.tempFiles[i].name : ''
            that.photoCompress(res.tempFiles[i], (base64Codes) => {
              let fl = that.dataURLtoFile(base64Codes, imgName)
            })
            let local_path = res.tempFilePaths[i];
						(async () => {
              let dir = 0
              if (that.vuex_sysinfo.indexOf('iOS') != -1) {
                dir = 0
              } else {
                let imginfo = await getImageData(local_path)
                dir = imginfo.exif.Orientation
              }
              let bs64 = await that.$u.utils.local_img2base64(local_path, dir)
              if (dir != 1) {
                let _path = await img_tool.base64ToPath(bs64)
                that.local_img.unshift(_path)
              } else {
                that.local_img.unshift(local_path)
              }
              // 将bs64图片传送到服务器
              that.$u.api
                .upload_base64({
                  chars: bs64,
                  check: 0,
                  camera: 0
                })
                .then((res) => {
                  if (res.code != 200) {
                    that.$refs.uToast.show({
                      title: res.msg,
                      type: 'error'
                    })
                  } else {
                    that.net_img.unshift(res.data.path)
                  }
                })
            })()
          }
        }
      })
    },
    photoCompress(file, objDiv) {
      // 压缩图片
      var ready = new FileReader()
      ready.readAsDataURL(file)
      const _this = this
      ready.onload = function () {
        var fileResult = this.result
        _this.canvasDataURL(fileResult, file.size, objDiv)
      }
    },
    canvasDataURL(path, size, callback) {
      var img = new Image()
      img.src = path
      var objCompressed = {}
      img.onload = function () {
        var that = this
        //默认压缩后图片规格
        // let num = that.floatFix(0.03, 2)
        var num = 15000 / size
        var quality = Math.round(num * 100) / 100
        var w = that.width
        var h = that.height
        var scale = w / h
        //实际要求
        w = objCompressed.width || w
        h = objCompressed.height || w / scale
        //生成canvas
        var canvas = document.createElement('canvas')
        var ctx = canvas.getContext('2d')
        // 创建属性节点
        var anw = document.createAttribute('width')
        anw.nodeValue = w
        var anh = document.createAttribute('height')
        anh.nodeValue = h
        canvas.setAttributeNode(anw)
        canvas.setAttributeNode(anh)
        ctx.drawImage(that, 0, 0, w, h)

        var base64 = canvas.toDataURL('image/jpeg', quality)
        // 回调函数返回base64的值
        callback(base64)
      }
    },
    floatFix(f, digit) {
      f = f * 1
      digit = digit ? digit : 2
      let m = Math.pow(10, digit)
      return parseInt(Math.round(f * m), 10) / m
    },
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, { type: mime })
    },
    // 确定寻人类型
    conFirmFindtType(num) {
      this.clearForm()
      if (num == 1) {
        this.formData.lost_type = 1
        this.type_flag = 1
        this.findType.familyLost = false
        this.findType.strangerLost = true
      } else {
        this.formData.lost_type = 0
        this.type_flag = 2
        this.findType.familyLost = true
        this.findType.strangerLost = false
      }
    },
    // radioChange
    radioChange(index) {
      // 0  男    1
      // 1  女    2
      index == 0 ? (this.formData.sex = 1) : (this.formData.sex = 2)
      this.items[index].checked = true
    },
    // 选择其他关系
    relationChange(relation) {
      this.form.relation = relation
    },
    // 计算时间
    onTime(e) {
      this.input = ''
      if (this.params.year) this.input += e.year
      if (this.params.month) this.input += '-' + e.month
      if (this.params.day) this.input += '-' + e.day
      if (this.params.hour) this.input += ' ' + e.hour
      if (this.params.minute) this.input += ':' + e.minute
      if (this.params.second) this.input += ':' + e.second
      this.time_show = true
      this.formData.lost_time = this.input
      this.timestamp = e.timestamp
    },
    // 选择位置
    chooseLocation() {
      let self = this
      uni.chooseLocation({
        success: (res) => {
          self.choose_lati = res.latitude
          self.choose_longi = res.longitude
          self.choose_name = res.name
        }
      })
    }
  }
}
</script>

<style lang="scss">
page {
  background: #f4f4f4;
}

#container {
  .banner {
    width: 750rpx;
    height: 100rpx;
  }
	.cause {
		height: 300rpx;
		background-color: pink;
	}
  .issue-btn {
    width: 572rpx;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    background: linear-gradient(90deg, #69dee8, #52d2cf);
    border-radius: 45rpx;
    font-size: 18px;
    color: #ffffff;
    margin: 0 auto;
    position: relative;
    top: -62rpx;
  }

  .reason {
    width: 698rpx;
    height: auto;
    background-color: #007aff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 10rpx 33rpx 15rpx 33rpx;
    background-color: #e5e5e5;

    .note {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
			margin-bottom: 10rpx;
			width: 100%;
      image {
        width: 40rpx;
        height: 40rpx;
      }

      .red_txt {
        color: red;
				font-size: 24rpx;
      }

      .txt1 {
				width: 30%;
        font-weight: 600;
      }
			.txt2 {
				width: 70%;
			}

      .detail {
				display: flex;
				justify-content: start;
        color: #5f5f5f;
				width: 100%;
      }
    }
  }

  .information {
    width: 698rpx;
    background: #ffffff;
    border-radius: 10rpx;
    margin: 0 auto;
    margin-bottom: 8rpx;
    position: relative;
    top: -100rpx;

    .wx {
      width: 42rpx;
      height: 42rpx;
      padding-bottom: 24rpx;
    }

    .phone-add {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      padding: 48rpx 0 73rpx 0;

      .phone-add-item {
        position: relative;
      }

      .close-icon {
        width: 32rpx;
        height: 32rpx;
        margin: 0 10rpx;
      }

      .phone-add-item,
      .phone-add-btn {
        width: 242rpx;
        height: 72rpx;
        border: 1rpx solid #cccccc;
        border-radius: 10rpx;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        .num {
        }

        .icon {
          width: 54rpx;
          height: 57rpx;
          position: absolute;
          bottom: 0;
          right: 0;
        }

        .plus {
          margin-right: 14rpx;
        }
      }
    }

    .img-content {
      display: flex;
      flex-wrap: wrap;
      padding: 67rpx 54rpx 57rpx;

      .pic {
        margin-bottom: 10rpx;
        position: relative;
        width: 146rpx;
        height: 146rpx;
        margin-right: 10rpx;

        .img {
          width: 146rpx;
          height: 146rpx;
        }

        .txt {
          position: absolute;
          width: 106rpx;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          font-size: 13px;
          color: #fff;
        }
      }
    }

    .title {
      display: flex;
      align-items: center;
      padding: 31rpx 0 0 33rpx;

      .vertical-bar {
        width: 8rpx;
        height: 30rpx;
        background: #69dde8;
        border-radius: 4rpx;
        margin-right: 12rpx;
      }

      .txt {
        font-size: 16px;
        font-weight: 700;

        .max {
          color: #ff0000;
          font-size: 18rpx;
          font-weight: normal;
        }
      }
    }

    .content {
      padding: 27rpx 0 36rpx 54rpx;
      .face-box {
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        padding-right: 20rpx;
        .face-item {
          position: relative;
          display: flex;
          justify-content: space-around;
          width: 40%;
          margin: 0 5% 10rpx;
          border: 2px solid #69dde8;
          border-radius: 10rpx;
          padding: 10rpx;
          font-size: 24rpx;
          overflow: hidden;
          .choose-item {
            position: absolute;
            bottom: 0;
            right: 0;
            height: 70%;
            width: 18%;
            z-index: 22;
          }
          view {
            padding: 6rpx;
          }
          .item-label {
            background-color: #f4f4f4;
          }
        }
      }

      .time,
      .position {
        width: 527rpx;
        height: 80rpx;
        border: 1rpx solid #69dde8;
        border-radius: 29rpx;
        color: #69dde8;
        display: flex;
        justify-content: center;
        align-items: center;
				font-size: 34rpx;
      }

      .icon {
        width: 28rpx;
        height: 28rpx;
        margin-right: 14rpx;
      }

      .text {
        width: 550rpx;
        height: 90rpx;
      }

      .btn {
        width: 133rpx;
        height: 45rpx;
        line-height: 45rpx;
        font-size: 24rpx;
        background-color: #ffb400;
        color: #fff;
        margin: 0 auto;
        text-align: center;
        border-radius: 5rpx;
        margin-top: 30rpx;
      }

      .form-content {
        // padding: 0 54rpx;

        .form-content-item {
          display: flex;
          width: 590rpx;
          margin: 0 auto;

          .u-form-item--left {
            height: 45rpx;
          }

          .u-form-item--right__content {
            display: flex;
          }

          .choose {
            padding-left: 38rpx;

            radio-group {
              display: flex;

              .uni-list-cell {
                display: flex;
                padding-right: 54rpx;
                margin-left: 50rpx;
              }
            }
          }

          .radio-label {
            display: inline-block;
            padding: 0 20rpx;
            border: 1rpx solid rgb(228, 231, 237);
            // border-radius: 12rpx;
            margin: 0 10rpx 10rpx 0;
            background-color: #e8e8e8;
            color: #7b7b7b;

            .radio-box {
              vertical-align: top;
              right: 5rpx;
              top: -20rpx;
            }
          }

          .content-input {
            display: flex;
            align-items: center;
            width: 405rpx;
            height: 58rpx;
            border: 1rpx solid #cdcdcd;
            border-radius: 28rpx;
            padding-left: 20rpx;
            margin-left: 80rpx;
          }
        }
      }

      .add-item {
        position: relative;
        width: 50%;
        margin: 20rpx auto 0;
        .add-btn {
          width: 271rpx;
          height: 131rpx;
        }
        .add-item-txt {
          color: #999999;
          font-size: 26rpx;
          position: absolute;
          left: 40%;
          bottom: 13rpx;
          transform: translateX(-50%);
        }
      }

      .content-item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 270rpx;
        height: 72rpx;
        border-radius: 10rpx;
        margin-bottom: 24rpx;
        border: 2rpx solid #69dde8;
        position: relative;

        .name {
        }

        .call-name {
          width: 70rpx;
          height: 37rpx;
          line-height: 37rpx;
          margin-left: 54rpx;
          background-color: #f4f4f4;
          text-align: center;
        }

        .xz {
          width: 56rpx;
          height: 57rpx;
          position: absolute;
          bottom: 0;
          right: 0;
        }
      }

      .search-title {
        width: 587rpx;
        border-top: 1rpx solid #e9e9e9;

        .search-title-txt {
          padding: 13rpx 0;
          font-size: 24rpx;
          font-weight: 700;
        }
      }

      .kinsfolk {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 185rpx;
        height: 76rpx;
        color: #878787;
        font-weight: 700;
        font-size: 30rpx;
        background-color: #f8f8f8;
        margin-right: 29rpx;

        .icon {
          width: 28rpx;
          height: 26rpx;
          margin-right: 12rpx;
        }
      }

      .relation {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 185rpx;
        height: 76rpx;
        background-color: #f8f8f8;
        color: #878787;
        font-size: 30rpx;
        font-weight: 700;
        background-size: 99.5%;

        .icon {
          width: 30rpx;
          height: 30rpx;
          margin-right: 12rpx;
        }
      }

      .typeConfirm {
        background: url(../../static/people-search/xzlx.png);
        background-size: 100%;
        color: #ff5b76;
      }
    }
  }

  .protocol {
    text-align: center;
    background-color: transparent;
  }
}
</style>
